
/**
 * >=min && <=max
 * @param min
 * @param max
 */
function getRandom(min, max) {
  return min + Math.floor(Math.random() * (max - min + 1));
}
// eslint-disable-next-line no-unused-vars
class ThumbsUpAni {
    imgsList = [];
    context;
    width = 0;
    height = 0;
    scanning = false;
    renderList=[];
    scaleTime = 0.1;// 百分比
    constructor() {
      this.loadImages();
      const canvas = document.getElementById('thumsCanvas');
      this.context = canvas.getContext('2d');
      this.width = canvas.width;
      this.height = canvas.height;
    }
    loadImages() {
      const images = [
        'jfs/t1/93992/8/9049/4680/5e0aea04Ec9dd2be8/608efd890fd61486.png',
        'jfs/t1/108305/14/2849/4908/5e0aea04Efb54912c/bfa59f27e654e29c.png',
        'jfs/t1/98805/29/8975/5106/5e0aea05Ed970e2b4/98803f8ad07147b9.png',
        'jfs/t1/94291/26/9105/4344/5e0aea05Ed64b9187/5165fdf5621d5bbf.png',
        'jfs/t1/102753/34/8504/5522/5e0aea05E0b9ef0b4/74a73178e31bd021.png',
        'jfs/t1/102954/26/9241/5069/5e0aea05E7dde8bda/720fcec8bc5be9d4.png',
      ];
      const promiseAll = [];
      images.forEach((src) => {
        const p = new Promise((resolve) => {
          const img = new Image;
          // eslint-disable-next-line no-multi-assign
          img.onerror = img.onload = resolve.bind(null, img);
          img.src = `https://img12.360buyimg.com/img/${src}`;
        });
        promiseAll.push(p);
      });
      Promise.all(promiseAll).then((imgsList) => {
        this.imgsList = imgsList.filter((d) => {
          if (d && d.width > 0) return true;
          return false;
        });
        if (this.imgsList.length === 0) {
          return;
        }
      });
    }
    createRender() {
      if (this.imgsList.length === 0) return null;
      const basicScale = [0.6, 0.9, 1.2][getRandom(0, 2)];

      const getScale = (diffTime) => {
        if (diffTime < this.scaleTime) {
          return +((diffTime / this.scaleTime).toFixed(2)) * basicScale;
        }
        return basicScale;
      };
      const { context } = this;
      // 随机读取一个图片来渲染
      const image = this.imgsList[getRandom(0, this.imgsList.length - 1)];
      const offset = 20;
      const basicX = this.width / 2 + getRandom(-offset, offset);
      const angle = getRandom(2, 10);
      const ratio = getRandom(10, 30) * ((getRandom(0, 1) ? 1 : -1));
      const getTranslateX = (diffTime) => {
        if (diffTime < this.scaleTime) { // 放大期间，不进行摇摆位移
          return basicX;
        }
        return basicX + ratio * Math.sin(angle * (diffTime - this.scaleTime));
      };

      const getTranslateY = diffTime => image.height / 2 + (this.height - image.height / 2) * (1 - diffTime);

      const fadeOutStage = getRandom(14, 18) / 100;
      const getAlpha = (diffTime) => {
        const left = 1 - +diffTime;
        if (left > fadeOutStage) {
          return 1;
        }
        return 1 - +((fadeOutStage - left) / fadeOutStage).toFixed(2);
      };

      return (diffTime) => {
        // 差值满了，即结束了 0 ---》 1
        if (diffTime >= 1) return true;
        context.save();
        const scale = getScale(diffTime);
        // const rotate = getRotate();
        const translateX = getTranslateX(diffTime);
        const translateY = getTranslateY(diffTime);
        context.translate(translateX, translateY);
        context.scale(scale, scale);
        // context.rotate(rotate * Math.PI / 180);
        context.globalAlpha = getAlpha(diffTime);
        context.drawImage(
          image,
          -image.width / 2,
          -image.height / 2,
          image.width,
          image.height,
        );
        context.restore();
      };
    }
    scan() {
      this.context.clearRect(0, 0, this.width, this.height);
      this.context.fillStyle = '#f4f4f4';
      this.context.fillRect(0, 0, 200, 400);
      let index = 0;
      let { length } = this.renderList;
      if (length > 0) {
        requestFrame(this.scan.bind(this));
        this.scanning = true;
      } else {
        this.scanning = false;
      }
      while (index < length) {
        const child = this.renderList[index];
        if (!child || !child.render || child.render.call(null, (Date.now() - child.timestamp) / child.duration)) {
          // 结束了，删除该动画
          this.renderList.splice(index, 1);
          // eslint-disable-next-line no-plusplus
          length--;
        } else {
          // continue
          // eslint-disable-next-line no-plusplus
          index++;
        }
      }
    }
    start() {
      const render = this.createRender();
      const duration = getRandom(1500, 3000);
      this.renderList.push({
        render,
        duration,
        timestamp: Date.now(),
      });
      if (!this.scanning) {
        this.scanning = true;
        requestFrame(this.scan.bind(this));
      }
      return this;
    }
}
function requestFrame(cb) {
  return (
    window.requestAnimationFrame
      || window.webkitRequestAnimationFrame
      || function (callback) {
        window.setTimeout(callback, 1000 / 60);
      }
  )(cb);
}
const thumbsUpAni = new ThumbsUpAni();
export default thumbsUpAni;
